<template>
	<!-- <view class="status-bar"></view> -->
	<view class="box">
		<view class="status-bar"></view>
		<view class="head fui-rect" @click="isLogin">
			<!-- #ifdef APP -->
			<view class="setup" @click.stop="setup">
				<fui-icon size="50" color="#fff" name="setup"></fui-icon>
			</view>
			<!--  #endif -->
			<view class="head-right">
				<fui-avatar size="large" :src="userInfo?.avatar||'/static/nologin.png'"
					style="border: 1rpx solid #fff;"></fui-avatar>
				<view class="name"
					style="margin-left: 40rpx;display: flex;flex-direction: column;justify-content: space-around;">
					<text
						style="font-size: 32rpx;font-weight: 600;color: #fff;">{{hasLogin?userInfo.nickname:'去登录'}}</text>
					<text v-if="hasLogin" style="font-size: 26rpx;color: #fff;">邀请码：<fui-text
							:text="userInfo?.my_invite_code" :value="userInfo?.my_invite_code" color="#fff"
							@click="copyText(userInfo?.my_invite_code)"></fui-text></text>
				</view>
			</view>
			<view class="head-left" v-if="hasLogin&&userInfo?.vipPower">
				<view class="level">
					<view style="display: flex;align-items: center;">
						<image style="width: 50rpx;height: 50rpx;" src="../../../static/images/member/icon_vip_3x.png"
							mode=""></image>
					</view>
					<view style="font-size: 24rpx;">
						{{userInfo?.vipPower?.vip_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="vip fui-rect" @click="vip">
			<view class="vip_img">
				<image style="width: 60rpx;height: 60rpx;" src="../../../static/images/member/icon_vip_3x.png" mode="">
				</image>
				<view class="vip_text">
					{{userInfo?.vipPower?.vip_name=='普通会员'||hasLogin==false?"开通会员享受更多权益":"续费会员享受更久权益"}}
				</view>
			</view>
			<view class="vip_btn">
				{{userInfo?.vipPower?.vip_name=='普通会员'||hasLogin==false?"开通会员":"续费会员"}}
			</view>
		</view>
		<view class="money fui-rect">
			<view class="title">
				<view class="title_sen">
					我的资产
				</view>
				<view class="chong" @click="topup" v-if="!skeletonShow">
					<fui-icon name="aftersale" color="#fff" :size="40"></fui-icon><text
						style="font-size: 24rpx;">充值余额</text>
				</view>
			</view>
			<view class="cont">
				<view class="one1" @click="withdraw">
					<view class="type">
						账户余额
					</view>
					<view class="num">
						￥{{getMoney(userInfo?.money?.income_balance,userInfo?.money?.topup_balance)}}
					</view>
				</view>
				<view class="one1 right" @click="daymoney">
					<view class="type">
						今日收益
					</view>
					<view class="num">
						￥{{Number(userInfo?.money?.dayIncome||0).toFixed(2)}}
					</view>
				</view>
			</view>
		</view>

		<view style="width: 92vw;padding: 12rpx 32rpx 0rpx 0;">
			<image class="fui-rect" @click="share" style="height: 160rpx;width: 100%;border-radius: 20rpx;"
				src="../../../static/yaoqing.png"></image>
		</view>

		<view class="publish fui-rect">
			<view class="title_sen">
				发布管理
			</view>
			<view class="grid">
				<fui-grid :showBorder="false" :columns="4" :square="true" between>
					<fui-grid-item :highlight="false">
						<view class="fui-grid__cell fui-padding" @click="fabu">
							<image src="/static/image/my/yqhy.png" class="fui-icon__2x"
								style="border-radius: 50%;width: 45px;height: 45px;">
							</image>
							<view style="color: var(--fui-color-subtitle);font-size: 26rpx;">我要发布</view>
						</view>
					</fui-grid-item>
					<fui-grid-item :highlight="false" v-for="(item,index) in publish" :key="index">
						<view class="fui-grid__cell fui-padding" @click="gopublishAdmin(item.manage_url,item.publish_type,item._id,item.manage_name)">
							<view style="font-size: 35rpx;padding: 15rpx;font-weight: bold;">
								<text>{{item?.value||0}}</text>篇
							</view>
							<view style="color: var(--fui-color-subtitle);font-size: 26rpx;">{{item.manage_name}}</view>
						</view>
					</fui-grid-item>
				</fui-grid>
			</view>
		</view>

		<view class="publish1 fui-rect">
			<view class="title_sen">
				常用服务
			</view>
			<fui-grid :showBorder="false" :columns="4" :square="true" between>
				<fui-grid-item :highlight="false" v-for="(item,index) in CommonlyUsed" :key="index">
					<view class="fui-grid__cell fui-padding" @click="goDetail(item.openUrl)">
						<image :src="item.image" class="fui-icon__2x" style="width: 28px;height: 28px;">
						</image>
						<view style="color: var(--fui-color-subtitle);font-size: 26rpx;">{{item.name}}</view>
					</view>
				</fui-grid-item>
			</fui-grid>
			<view class="kefu">
				<view class="kefu_left">
					<view class="">
						<image style="width: 80rpx;height: 80rpx;" src="@/static/image/my/kf.png" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view style="font-weight: 900;">
							Hi,欢迎加入千度导航群聊
						</view>
						<view style="font-size: 24rpx;color: var(--fui-color-subtitle);">
							解答您所有疑虑
						</view>
					</view>
				</view>
				<view class="btn" @click="CustomerService">
					去加入
				</view>
			</view>
			<fui-modal :buttons="[]" width="600" :zIndex="999" @cancel="CustomerShow=false" :maskClosable="true" :show="CustomerShow">
				<!-- <text class="fui-title">{{popup?.title}}</text> -->
				<!-- <text class="fui-descr">{{popup?.content}}</text> -->
				<image show-menu-by-longpress="true" @click="bigImg(config?.reception)"
					style="width: 400rpx;margin-top: 25rpx;" :src="config?.reception" mode="widthFix"></image>
				<!-- #ifdef APP-PLUS -->
				<view style="display: flex;justify-content: space-between;width: 80%;">
					<fui-button @click="twocode(config?.reception)" text="识别二维码" width="200rpx" height="72rpx"
						:size="28" radius="36rpx" background="#F1F4FA" color="#000" erWidth="0"
						:margin="['24rpx','0','24rpx']">
					</fui-button>
					<fui-button @click="saveCode(config?.reception)" text="保存二维码" width="200rpx" height="72rpx"
						:size="28" radius="36rpx" background="#fd5531" color="#fff" borderWidth="0"
						:margin="['24rpx','0','24rpx']">
					</fui-button>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<fui-button @click="saveCode(config?.reception)" text="保存二维码" width="200rpx" height="72rpx" :size="28"
					radius="36rpx" background="#fd5531" color="#fff" borderWidth="0" :margin="['24rpx','0','24rpx']">
				</fui-button>
				<!-- #endif -->
			</fui-modal>
		</view>
		<bottomPop></bottomPop>
		<!-- 骨架屏 -->
		<fui-skeleton v-if="skeletonShow" background="#F1F4FA" outerClass="box"></fui-skeleton>
	</view>
</template>

<script setup>
	import { GlobalStore } from "@/store/index.js";
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
	import callCheckVersion from '@/uni_modules/uni-upgrade-center-app/utils/call-check-version';
	const qcGlobalApi = uniCloud.importObject('qc-global', {
		customUI: true // 取消自动展示的交互提示界面
	})
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	const apiVip = uniCloud.importObject('qc-vip', {
		customUI: true // 取消自动展示的交互提示界面
	})
	const uniApi = uniCloud.importObject('qc-user', { customUI: true })
	import { parseCode } from '@/utils/index.js'
	import $fui from '@/components/firstui/fui-clipboard';
	import { ConfigStore } from '@/store/modules/config.js'
	import { LoginStore } from "@/store/modules/login.js";
	import bottomPop from '@/components/bottomPop.vue'
	import { ref, reactive, computed } from 'vue'
	import { onLoad, onPullDownRefresh, onShow, onUnload } from "@dcloudio/uni-app";
	const userInfo = computed(() => (LoginStore().userInfo))
	const hasLogin = computed(() => (LoginStore().hasLogin))
	const config = computed(() => (ConfigStore().config))
	const publish = computed(() => (ConfigStore().publish))
	// const bomShow = computed(()=>(GlobalStore().bomShow))

	//计算金额
	const getMoney = computed(() => (a, b) => {
		if (a || b) {
			return (Number(a) + Number(b)).toFixed(2)
		} else {
			return Number(0).toFixed(2)
		}
	})

	//常用服务数据
	const CommonlyUsed = [{
			image: "../../../static/image/my/yqhys.png",
			name: "邀请好友",
			openUrl: "/pages/user/Invitation/Invitation"
		},
		{
			image: "../../../static/image/my/tdgl.png",
			name: "团队管理",
			openUrl: "/pages/user/team/team"
		},
		{
			image: "../../../static/image/my/sz.png",
			name: "设置中心",
			openUrl: "/pages/user/setup/setup"
		},
		{
			image: "../../../static/image/my/kf.png",
			name: "联系客服",
			openUrl: "联系客服"
		},
		{
			image: "../../../static/image/my/wdyqr.png",
			name: "关于我们",
			openUrl: "/pages/user/setup/about"
		},
		{
			image: "../../../static/image/my/smrz.png",
			name: "帮助中心",
			openUrl: "/pages/user/helpCenter/helpCenter"
		},
		{
			image: "../../../static/image/my/bbgx.png",
			// #ifdef APP
			name: "版本更新",
			// #endif
			// #ifdef H5
			name: "下载APP",
			// #endif
			openUrl: true
		},
		{
			image: "../../../static/image/my/yjfk.png",
			name: "退出登录",
			openUrl: "退出登录"
		},
	]
	//骨架屏
	const skeletonShow = ref(true)
	const data = reactive({
		randomData: []
	})
	const fabu = ()=>{
		GlobalStore().changebomShow()
	}
	onLoad(async () => {
		setTimeout(() => {
			skeletonShow.value = false
		}, 500)
	})
	
	onShow(async()=>{
		if(hasLogin.value){
			const res = await uniApi.getContentNum({
				user_id:userInfo?.value?._id
			})
			publish.value.forEach(item=>{
				res.data.forEach(i=>{
					if(item.publish_type==i.type){
						item.value = i.value
					}
				})
			})
		}
	})
	
	const CustomerService = () => {
		//外部链接
		// #ifdef APP-PLUS
		plus.runtime.openURL("http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=bmMOrN-pBS186RZ4tRt0yxQuQuL4Y0YH&authKey=lZhWklBe7d6sK2w3KgiPH9g%2BCSTBvMQrViHgaZ6xyIUOF0M%2FgqBupwwvQBZClxFi&noverify=0&group_code=863481080")
		// #endif
		// #ifdef H5
		window.open("http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=bmMOrN-pBS186RZ4tRt0yxQuQuL4Y0YH&authKey=lZhWklBe7d6sK2w3KgiPH9g%2BCSTBvMQrViHgaZ6xyIUOF0M%2FgqBupwwvQBZClxFi&noverify=0&group_code=863481080")
		// #endif
	}



	onShow(async () => {
		if (hasLogin.value) {
			LoginStore().updateHasLogin()
			LoginStore().updateUserInfo()
		}
	})
	// 返回上一层
	// #ifdef H5 
	const navigateBack = () => {
		uni.navigateBack()
	}
	// #endif
	// 复制文本
	const copyText = (text) => {
		$fui.getClipboardData(text, res => {
			if (res) uni.fui.toast('复制成功');
		});
	}
	//是否登录
	const isLogin = () => {
		if (!hasLogin.value) {
			uni.fui.href('/pages/entrance/login/login')
		}
	}
	//盲反
	const share = () => {
		uni.fui.href('/pages/user/Invitation/Invitation')
	}
	const goDetail = (openUrl) => {
		if (openUrl == "退出登录") return LoginStore().logout()
		if (openUrl == "联系客服") return CustomerShow.value = true
		if (openUrl == "暂未开放") return uni.fui.toast('暂未开放')
		if (openUrl === true) {
			// #ifdef APP
			checkVersion()
			// #endif
			// #ifdef H5
			uni.fui.href('/pages/user/uploadPage/uploadPage')
			// #endif
		} else {
			uni.fui.href(openUrl)
		}
	}
	// 版本更新
	let isVersion = true
	const checkVersion = async () => {
		if (!isVersion) return
		let res = await callCheckVersion()
		if (res.result.code > 0) {
			isVersion = false
			checkUpdate()
		} else {
			uni.showToast({
				title: res.result.message,
				icon: 'none'
			});
		}
	}

	//充值
	const topup = () => {
		uni.fui.href('/pages/user/topup/topup')
	}
	const withdraw = () => {
		uni.fui.href('/pages/user/withdraw/withdraw')
	}
	const daymoney = () => {
		uni.fui.href('/pages/user/baldetail/baldetail')
	}
	const vip = () => {
		uni.fui.href('/pages/user/vip/vip')
	}
	//发布管理
	const gopublishAdmin = (url, type, id, name) => {
		let item = {
			publish_type: type,
			category_id: id,
			name
		}
		// #ifdef APP-PLUS
		uni.fui.href(`${url}?item=${JSON.stringify(item)}`)
		// #endif
		// #ifdef H5
		uni.fui.href(`${url}?item=${encodeURI(JSON.stringify(item))}`)
		// #endif
	}
	//下拉刷新
	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	const CustomerShow = ref(false)

	//预览图片
	const bigImg = (e) => {
		uni.previewImage({
			urls: [e],
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if (data.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: e,
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(e)
					}
				},
				fail: function(err) {

				}
			}
		});
	}
	//设置
	const setup = () => {
		uni.fui.href('/pages/user/setup/setup')
	}
	const twocode = (e) => {
		parseCode(e)
	}
	//保存到相册
	const saveCode = (e) => {
		uni.saveImageToPhotosAlbum({
			filePath: e,
			success: function() {
				uni.fui.toast('成功保存到系统相册中')
			}
		});
	}
</script>
<style scoped>
	.ljlq {
		color: #FF0000;
		padding: 8rpx 25rpx;
		border-radius: 25rpx;
		background-color: #ffd430;
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
<style lang="scss" scoped>
	.fui-padding {
		padding-top: 20rpx;
	}

	.swiper-item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	// .box {
	// 	height: 450rpx;
	// 	font-size: 28rpx;
	// 	padding: 32rpx;
	// 	border-bottom-left-radius: 10%;
	// 	border-bottom-right-radius: 10%;
	// 	background-image: linear-gradient(to right top, #ff6f49, #ff5a5e);
	// }
	.box {
		font-size: 28rpx;
		padding: 32rpx;
		background: url('../../../static/image/my/mybj.png');
		background-size: 100% 260px;
		background-position: center top;
		/* 使用线性渐变，从上到下 */
		// background: linear-gradient(to bottom, #3ab3fd, #ffffff) !important;
		/* 设置背景大小，以填充整个元素 */
		// background-size: 100% 100%;
		/* 设置背景重复方式，不重复 */
		background-repeat: no-repeat;
	}

	.status-bar {
		/* #ifdef H5 */
		margin-top: 20rpx;
		/* #endif */
		/* #ifdef APP */
		margin-top: 80rpx;
		/* #endif */
	}

	.setup {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
	}

	.head-right {
		display: flex;
	}

	.f_left {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top {
		font-size: 24rpx;

		text {
			font-size: 36rpx;
			font-weight: 800;
		}
	}

	.flex {
		padding: 32rpx 0rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-around;
	}

	.bottom {
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.lj_btn {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.fhc {
		padding: 18rpx;
		margin-top: 22rpx;
		border-radius: 16rpx;
		background-color: var(--fui-color-primary);
		background: url('../../../static/my-bg.png');
		background-size: inherit;
	}

	.fui-grid__cell {
		margin: auto;
		text-align: center;
	}

	.grid {
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);
		padding: 10rpx 0 0rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.btn {
		padding: 8rpx 20rpx;
		color: #4d83fb;
		background-color: #d7e3fd;
		border-radius: 30rpx;
	}

	.kefu_left {
		display: flex;
	}

	.kefu {
		margin-top: 20rpx;
		border-radius: 15rpx;
		background-color: #f2f5fb;
		display: flex;
		align-items: center;
		padding: 32rpx;
		justify-content: space-between;
	}

	.line {
		width: 1px;
		height: 110rpx;
		background-color: #ccc;
	}

	.title_sen {
		font-size: 32rpx;
		font-weight: 600;
	}

	.cont1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
	}

	.cont {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.one2 {
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.one {
		height: 80rpx;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.one1 {
		background: url(/static/leijizhuan.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 35vw;
		height: 100rpx;
		padding: 32rpx 22rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-radius: 20rpx;
	}

	.type {
		font-size: 30rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.num {
		font-size: 34rpx;
		font-weight: 900;
		text-align: left;
		width: 100%;
	}

	.num1 {
		font-size: 24rpx;
		color: var(--fui-color-subtitle);
	}

	.publish {
		position: relative;
		margin-top: 12rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.publish1 {
		padding: 32rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.money {
		margin-top: 22rpx;
		position: relative;
		padding: 20rpx 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.chong {
		font-size: 35rpx;
		font-weight: bold;
		height: 60rpx;
		position: absolute;
		top: 0;
		right: 0;
		padding: 5rpx 30rpx;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-image: linear-gradient(to right top, #6DBEFF, #58D3EB);
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.right {
		background: url(/static/qiandaohong.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: right;
	}

	.vip {
		padding: 22rpx;
		display: flex;
		background-color: #263658;
		align-items: center;
		color: #febf40;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.vip_img {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.vip_text {
		margin-left: 30rpx;
	}

	.vip_btn {
		padding: 10rpx 30rpx;
		background-color: #febf40;
		color: #fff;
		border-radius: 30rpx;
	}

	.head {
		position: relative;
		align-items: center;
		padding: 20rpx 0rpx;
		// background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.level {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding: 0rpx 20rpx 0rpx 14rpx;
		border-radius: 50rpx;
	}

	.head-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 90px;
	}
</style>